<template>
  <div id="home">
    <el-header class="header" :class="{'mini':toggle}">
      <div class="logo">
        <img v-if="!toggle" src="@/components/content/img/logo-long.png" alt>
        <img v-if="toggle" src="@/components/content/img/logo-mini.png" alt>
      </div>
      <div class="toggle" :class="{'active':toggle}" @click="toggle=!toggle">
        <i></i>
      </div>
      <div class="crumb">
        <template v-if="$route.meta.name" v-for="(item,index) in $route.meta.name">
          <span v-html="item"></span>
        </template>
      </div>
      <div class="user">
        <div class="photo">
          <img src="./img/user.png" alt>
        </div>
        <el-dropdown trigger="click" @command="editPassword">
          <span class="el-dropdown-link">
            admin
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="password">修改密码</el-dropdown-item>
            <el-dropdown-item command="exit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container :class="{'mini':toggle,'big':!toggle}">
      <el-aside class="el_left">
        <router-link to="/home/register" class="menu">
          <i class="el_icon icon_register"></i>
          <span>登记</span>
        </router-link>
        <router-link to="/home/bespoke" class="menu">
          <i class="el_icon icon_bespoke"></i>
          <span>预约</span>
        </router-link>
        <router-link to="/home/caseBook" class="menu">
          <i class="el_icon icon_case"></i>
          <span>病例</span>
        </router-link>
        <router-link to="/home/follow" class="menu">
          <i class="el_icon icon_follow"></i>
          <span>随访</span>
        </router-link>
        <router-link to="/home/template" class="menu">
          <i class="el_icon icon_template"></i>
          <span>模板</span>
        </router-link>
        <router-link to="/home/system" class="menu">
          <i class="el_icon icon_system"></i>
          <span>设置</span>
        </router-link>
      </el-aside>
      <el-main>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      toggle: false
    };
  },
  methods: {
    editPassword(command) {
      if (command === "password") this.$router.push({ name: "password" });
      if (command === "exit") this.$router.push({ name: "login" });
    }
  },
  mounted() {
    this.toggle = document.body.clientWidth <= 800;
  }
};
</script>

<style scoped>
.el-container {
  width: 100%;
  height: calc(100vh - 61px);
}

.header {
  background: #ffffff;
}

.user {
  float: right;
  padding-right: 20px;
  line-height: 60px;
}

.user .photo {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.photo img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.crumb {
  line-height: 60px;
  font-size: 14px;
  padding-left: 30px;
  float: left;
}

.crumb span:last-child {
  color: #006835;
  font-weight: bold;
}

.crumb span:after {
  content: "/";
  margin: 0 10px;
  font-weight: normal !important;
  color: #666666 !important;
}

.crumb span:last-child:after {
  display: none;
}

.toggle {
  width: 60px;
  height: 59px;
  float: left;
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
  cursor: pointer;
  position: relative;
}

.toggle i {
  display: block;
  width: 20px;
  height: 20px;
  background: url("./img/toggle.png") 0 0 no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px 0 0 -10px;
  -webkit-background-size: 20px 20px;
  background-size: 20px 20px;
}

.toggle.active i {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.menu {
  display: block;
  width: 100%;
  height: 60px;
  padding-left: 40px;
  line-height: 60px;
  border-bottom: 1px solid #e4e4e4;
  position: relative;
}

.menu span {
  font-size: 16px;
  font-weight: bold;
  color: #999999;
}

.router-link-active span {
  color: #006835;
}

.el_icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 20px;
}

.icon_register {
  background: url("./img/register.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.icon_bespoke {
  background: url("./img/bespoke.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.icon_case {
  background: url("./img/case.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.icon_follow {
  background: url("./img/follow.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.icon_template {
  background: url("./img/template.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.icon_system {
  background: url("./img/system.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.router-link-active .icon_register {
  background: url("./img/register-active.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.router-link-active .icon_bespoke {
  background: url("./img/bespoke-active.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.router-link-active .icon_case {
  background: url("./img/case-active.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.router-link-active .icon_follow {
  background: url("./img/follow-active.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.router-link-active .icon_template {
  background: url("./img/template-active.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.router-link-active .icon_system {
  background: url("./img/system-active.png") 0 0 no-repeat;
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
}

.router-link-active:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #e4e4e4;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -6px;
}

.el_left {
  background: #ffffff;
  width: 220px;
  height: calc(100vh - 61px);
  overflow-x: hidden;
  -webkit-box-shadow: 5px 2px 10px #dbdbdb;
  -moz-box-shadow: 5px 2px 10px #dbdbdb;
  box-shadow: 5px 2px 10px #dbdbdb;
  z-index: 99;
}

.logo {
  text-align: center;
  width: 220px;
  height: 59px;
  line-height: 59px;
  overflow: hidden;
  float: left;
  background: #ffffff;
  -webkit-background-size: auto 40px;
  background-size: auto 40px;
}

.logo img {
  height: 40px;
  width: auto;
  vertical-align: middle;
  margin-top: -3px;
}

.mini .logo,
.mini .el_left {
  width: 100px !important;
}

.mini .logo {
  background: #006835;
  -webkit-background-size: auto 40px;
  background-size: auto 40px;
}

.mini .menu:after {
  display: none;
}

.mini .menu {
  padding-left: 0;
  text-align: center;
  height: 90px;
}

.mini .menu .el_icon {
  margin-right: 0;
}

.mini .menu span {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1;
}

.big .logo,
.big .el_left {
  width: 220px !important;
}

.big .logo {
  background: #ffffff url("./img/logo-long.png") center 10px no-repeat;
  -webkit-background-size: auto 40px;
  background-size: auto 40px;
}

.el-header {
  padding: 0;
  -webkit-box-shadow: 5px 2px 10px #dbdbdb;
  -moz-box-shadow: 5px 2px 10px #dbdbdb;
  box-shadow: 5px 2px 10px #dbdbdb;
}
</style>
